<template>
  <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"/>
</template>

<script>
  import Icons from '_c/icons'

  export default {
    name: 'CommonIcon',
    components: { Icons },
    props: {
      type: {
        type: String,
        required: true
      },
      color: String,
      size: Number
    },
    computed: {
      iconType () {
        return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
      },
      iconName () {
        return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
      },
      iconSize () {
        return this.size || (this.iconType === 'Icons' ? 12 : undefined)
      },
      iconColor () {
        return this.color || ''
      }
    },
    methods: {
      getCustomIconName (iconName) {
        return iconName.slice(1)
      }
    }
  }
</script>

<style>

</style>
